﻿@page
@model LoginModel

@{
    ViewData["Title"] = "登陆";
    Layout = null;
}


<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精泰检测 - @ViewData["Title"]</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <div class="canvas-nest">
        <canvas id="canvas"></canvas>
    </div>

    <div class="container pt-md-5">

        <div class="row pt-md-5 mt-md-5">
            <div class="col-md-4 offset-md-8 card p-md-4">
                <section>
                    <form id="account" method="post">

                        <div asp-validation-summary="All" class="text-danger"></div>
                        <div class="form-group">
                            <label asp-for="Input.Email"></label>
                            <div class="input-group margin-bottom-sm">

                                <div class="input-group-prepend">
                                    <span class="input-group-text ">
                                        <i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <input asp-for="Input.Email" class="form-control" type="text" placeholder="您的邮箱地址">
                            </div>

                            <span asp-validation-for="Input.Email" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Input.Password"></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text ">
                                        <i class="fa fa-key fa-fw" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <input asp-for="Input.Password" class="form-control" type="password" placeholder="请输入密码">
                            </div>
                            <span asp-validation-for="Input.Password" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label asp-for="Input.RememberMe">
                                    <input asp-for="Input.RememberMe" />
                                    @Html.DisplayNameFor(m => m.Input.RememberMe)
                                </label>
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <button type="submit" class="btn btn-primary">登陆</button>
                        </div>
                        <div class="form-group  float-sm-right">

                            <a id="forgot-password" asp-page="./ForgotPassword">忘记密码?</a>


                            <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">注册新用户</a>

                            @*<p>
                                    <button type="submit" asp-page-handler="SendVerificationEmail" class="btn-link" style="padding:0px;margin:0px;border:0px">重新发送电子邮件确认</button>
                                </p>*@
                        </div>
                    </form>
                </section>
            </div>
            @*<div class="col-md-6 col-md-offset-2">
                    <section>
                        <h4>使用其他服务登录.</h4>
                        <hr />
                        @{
                            if ((Model.ExternalLogins?.Count ?? 0) == 0)
                            {
                                <div>
                                    <p>
                                        没有配置任何外部身份验证服务. 看 <a href="https://go.microsoft.com/fwlink/?LinkID=532715">这篇文章</a>
                                        详细介绍了如何设置这个ASP。NET应用程序支持通过外部服务登录。
                                    </p>
                                </div>
                            }
                            else
                            {
                                <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                                    <div>
                                        <p>
                                            @foreach (var provider in Model.ExternalLogins)
                                            {
                                                <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                                            }
                                        </p>
                                    </div>
                                </form>
                            }
                        }
                    </section>
                </div>*@
        </div>


    </div>






    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <partial name="_ValidationScriptsPartial" />

    <script>
        // 参考资料：https://github.com/sunshine940326/canvas-nest

        class Circle {
            //创建对象
            //以一个圆为对象
            //设置随机的 x，y坐标，r半径，_mx，_my移动的距离
            //this.r是创建圆的半径，参数越大半径越大
            //this._mx,this._my是移动的距离，参数越大移动
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.r = Math.random() * 10;
                this._mx = Math.random();
                this._my = Math.random();

            }

            //canvas 画圆和画直线
            //画圆就是正常的用canvas画一个圆
            //画直线是两个圆连线，为了避免直线过多，给圆圈距离设置了一个值，距离很远的圆圈，就不做连线处理
            drawCircle(ctx) {
                ctx.beginPath();
                //arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。
                ctx.arc(this.x, this.y, this.r, 0, 360)
                ctx.closePath();
                ctx.fillStyle = 'rgba(44, 143, 205, 0.3)';
                ctx.fill();
            }

            drawLine(ctx, _circle) {
                let dx = this.x - _circle.x;
                let dy = this.y - _circle.y;
                let d = Math.sqrt(dx * dx + dy * dy)
                if (d < 150) {
                    ctx.beginPath();
                    //开始一条路径，移动到位置 this.x,this.y。创建到达位置 _circle.x,_circle.y 的一条线：
                    ctx.moveTo(this.x, this.y); //起始点
                    ctx.lineTo(_circle.x, _circle.y); //终点
                    ctx.closePath();
                    ctx.strokeStyle = 'rgba(44, 143, 205, 0.3)';
                    ctx.stroke();
                }
            }

            // 圆圈移动
            // 圆圈移动的距离必须在屏幕范围内
            move(w, h) {
                this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
                this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
                this.x += this._mx / 2;
                this.y += this._my / 2;
            }
        }

        //鼠标点画圆闪烁变动
        class currentCirle extends Circle {
            constructor(x, y) {
                super(x, y)
            }

            drawCircle(ctx) {
                ctx.beginPath();
                //注释内容为鼠标焦点的地方圆圈半径变化
                //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
                this.r = 8;
                ctx.arc(this.x, this.y, this.r, 0, 360);
                ctx.closePath();
                //ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
                ctx.fillStyle = 'rgba(255, 77, 54, 0.6)'
                ctx.fill();

            }
        }

        //更新页面用requestAnimationFrame替代setTimeout
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let w = canvas.width = canvas.offsetWidth;
        let h = canvas.height = canvas.offsetHeight;
        let circles = [];
        let current_circle = new currentCirle(0, 0)

        let draw = function () {
            ctx.clearRect(0, 0, w, h);
            for (let i = 0; i < circles.length; i++) {
                circles[i].move(w, h);
                circles[i].drawCircle(ctx);
                for (j = i + 1; j < circles.length; j++) {
                    circles[i].drawLine(ctx, circles[j])
                }
            }
            if (current_circle.x) {
                current_circle.drawCircle(ctx);
                for (var k = 1; k < circles.length; k++) {
                    current_circle.drawLine(ctx, circles[k])
                }
            }
            requestAnimationFrame(draw)
        }

        let init = function (num) {
            for (var i = 0; i < num; i++) {
                circles.push(new Circle(Math.random() * w, Math.random() * h));
            }
            draw();
        }

        window.addEventListener('load', init(60));

        window.onmousemove = function (e) {
            e = e || window.event;
            current_circle.x = e.clientX;
            current_circle.y = e.clientY;
        }

        window.onmouseout = function () {
            current_circle.x = null;
            current_circle.y = null;
        }
    </script>
</body>

</html>



